<template>
  <div id="app">
    <el-card shadow="hover" class="main-card">
      <!-- 查询表单 -->
      <el-form :inline="true" size="medium" :model="employeeSearch" class="demo-form-inline">
        <el-row :gutter="20" type="flex" justify="start" align="middle">
          <el-col :span="5">
            <el-form-item>
              <el-input v-model="employeeSearch.employeeName" placeholder="员工姓名" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item>
              <el-input v-model="employeeSearch.addr" placeholder="员工家庭住址" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item>
              <el-select v-model="employeeSearch.departmentId" placeholder="所在部门">
                <el-option label="所有部门" value="0"></el-option>
                <el-option :label="c.departmentName" :value="c.departmentId" v-for="c in departmentList" :key="c.departmentId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" icon="el-icon-search" @click="search" block>查询</el-button>
          </el-col>
          <el-col :span="6">
            <el-button type="success" icon="el-icon-plus" @click="add_employee" block>添加员工</el-button>
          </el-col>
          <el-col :span="6">
            <el-button type="danger" icon="el-icon-delete" @click="delete_employee" block>批量删除员工</el-button>
          </el-col>
        </el-row>
      </el-form>

      <!-- 员工信息表格 -->
      <el-table :data="employeeList" style="width: 100%" border @selection-change="handleSelectionChange">
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="员工编号" align="center" prop="employeeId" width="180" />
        <el-table-column label="姓名" prop="employeeName" align="center" />
        <el-table-column label="性别" prop="sex" align="center" />
        <el-table-column label="职位" prop="position" align="center" />
        <el-table-column label="住址" prop="addr" align="center" />
        <el-table-column label="所在部门" prop="departmentName" align="center" />
        <el-table-column label="操作" align="center">
          <template v-slot="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" class="edit-button">编辑</el-button>
            <el-button size="mini" type="danger" @click="delete_employee(scope.$index, scope.row)" class="delete-button">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total" class="pagination">
      </el-pagination>

      <!-- 添加或编辑员工信息对话框 -->
      <el-dialog title="员工信息" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
        <el-form :model="employee" :rules="rules" ref="ruleForm">
          <el-form-item label="姓名" prop="employeeName" :label-width="formLabelWidth">
            <el-input v-model="employee.employeeName" autocomplete="off" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex" :label-width="formLabelWidth">
            <el-radio v-model="employee.sex" label="男">男</el-radio>
            <el-radio v-model="employee.sex" label="女">女</el-radio>
          </el-form-item>
          <el-form-item label="职位" prop="position" :label-width="formLabelWidth">
            <el-input v-model="employee.position" autocomplete="off"  placeholder="请输入职位"></el-input>
          </el-form-item>
          <el-form-item label="家庭住址" prop="addr" :label-width="formLabelWidth">
            <el-input v-model="employee.addr" autocomplete="off" placeholder="请输入家庭住址"></el-input>
          </el-form-item>
          <el-form-item label="所在部门" prop="departmentId" :label-width="formLabelWidth">
            <el-select v-model="employee.departmentId" placeholder="请选择部门">
              <el-option label="所有部门" value="0"></el-option>
              <el-option :label="c.departmentName" :value="c.departmentId" v-for="c in departmentList" :key="c.departmentId"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save_employee">保 存</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import employeeApi from "@/api/employee"
import departmentApi from "@/api/department"
export default {
  data() {
    return {
      employeeList: [],
      page: 1,
      pageSize: 5,
      total: 100,
      employeeSearch:{},
      departmentList:[],
      dialogFormVisible:false,
      employee: {},
      title:"添加员工",
      formLabelWidth:'100px',
      Id:[],
      the_Selection:[],
      rules:{
        employeeName:[
          {required:true,message:'请输入员工姓名',trigger:'blur'
          },
        ],
        sex:[
          {
            required:true,message:'请选择员工性别',trigger:'blur'
          },
        ],
        position:[
          {
            required: true, message: "请输入员工职位",trigger:'blur'
          },
        ],
        addr:[
          {
            required:true,message:'请输入员工住址',trigger:'blur'
          },
        ],
        departmentId:[
          {
            required:true,message:'请选择员工部门',trigger:'blur'
          },
        ],
      }
    }
  },
  created() {

    this.search()
    this.finddepartment()
  },
  methods: {

    async finAllemployees() {
      const {data:res} = await employeeApi.findAllemployees()
      console.log(res)
      if (data.code === 200) {
        this.employeeList = res.data.list
      }
    },

    async findByPage() {
      const {data:res} = await employeeApi.findByPage(this.page,this.pageSize)
      console.log(res)
      if (res.code === 200) {
        this.employeeList = res.data.PR.rows
        this.total = res.data.PR.total
      }
    },

    async finddepartment() {
      const {data:res} = await departmentApi.finddepartment()
      console.log(res)
      if (res.code === 200) {
        this.departmentList = res.data.list
      }
    },

    async search(){
      const {data:res} = await employeeApi.search(this.page,this.pageSize,this.employeeSearch)
      console.log(res)
      if (res.code === 200) {
        this.employeeList = res.data.PR.rows
        this.total = res.data.PR.total
      }
    },
    add_employee(){
      this.title="添加员工"
      this.employee={}
      this.dialogFormVisible=true
    },
    handleSizeChange(val) {
      this.pageSize = val

      this.search()
      console.log(`每页 ${val} 条`);
    },
    handleSelectionChange(val) {
      this.the_Selection= val;
      console.log(this.the_Selection)
    },

    handleCurrentChange(val) {
      this.page = val

      this.search()
      console.log(`当前页: ${val}`);
    },
    handleEdit(index, row) {
      this.title="修改员工"
      this.employee=row
      this.dialogFormVisible=true
      console.log(index, row);
    },
    delete_employee(index, row) {
      this.Id = [];
      if (row) {
        this.Id.push(row.employeeId)
      } else {
        this.Id = this.the_Selection.map(m => m.employeeId)
      }
      this.$confirm(`是否确定要删除编号为${this.Id}的员工吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let _this = this
        employeeApi.delete(this.Id)
            .then(({data: res}) => {
              console.log("res:", res)
              if (res.code === 200) {
                this.$message({
                  type: 'success',
                  message: res.message,
                  onClose: () => {

                    _this.search()
                  }
                })
              } else {
                this.$message({
                  type: 'error',
                  message: res.message
                })
              }
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
    save_employee(){
      this.$refs.ruleForm.validate(async valid => {
        let url = "/employee/add"
        let method = "post"
        if(this.employee.employeeId){
          url = "/employee/update"
          method = "put"
        }
        if (valid) {
          const {data:res} = await employeeApi.save(url,method,this.employee)
          console.log("res:",res)
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: res.message,
              onClose: () => {
                this.dialogFormVisible = false
                this.search()
              }
            })
          }else{
            this.$message({
              type: 'error',
              message: res.message
            })
          }
        } else {
          console.log("验证失败！")
          return false
        }
      })
    },
  }

}
</script>
<style scoped>
.main-card {
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
}
.button-col {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.pagination {
  margin-top: 20px;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
.el-button {
  border-radius: 4px;
}
.el-table {
  margin-top: 20px;
}
.edit-button {
  background-color: #409EFF;
  color: white;
}
.delete-button {
  background-color: #F56C6C;
  color: white;
}
.el-dialog__header {
  background-color: #409EFF;
  color: white;
}
.el-dialog__body {
  padding: 20px;
}
</style>